<!--
 * @Description: 组合与拆分组合
-->

<template>
  <div v-if="isMultiple || isGroup">
    <!-- <ButtonGroup size="small" v-if="isMultiple || isGroup"> -->
    <!-- 组合按钮 多选时不可用 -->
    <button class="tool-item" data-name="组合" v-if="isMultiple" :disabled="!isMultiple" @click="group" type="text">
      <svg t="1683138752740" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="44228" width="26" height="26">
        <path
          d="M658.250232 97.522734H121.886483v536.363749h243.818126V926.454686h536.386328V390.090937H658.250232V97.522734z m-195.022889 341.34086h-195.045469l80.294245-80.294244-159.346593-159.324014 34.479559-34.479559 159.324013 159.324014 80.294245-80.294245v195.068048z m305.596825 146.272812l-85.645689 85.623109 169.959162 169.981742-36.782713 36.760132-170.004322-169.936582-85.600529 85.623109v-208.05151h208.074091z m-13.006042-283.42333V0H24.386329v722.264344h243.795545V1024H999.613671V301.713076H755.818126z m195.000308 673.514267H316.954531V682.65914H73.136406V48.772657h633.886483v292.568203h243.795545V975.227343z"
          fill="#1F3645" p-id="44229"></path>
      </svg>
    </button>
    <!-- 拆分组合按钮，为单选且组元素时可用 -->
    <button class="tool-item" data-name="拆分" v-if="isGroup" :disabled="!isGroup" @click="unGroup" type="text">
      <svg t="1683138779531" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="44383" width="26" height="26">
        <path
          d="M885 950.5H419.4c-42.2 0-76.5-34.3-76.5-76.5V381.7c0-27.5 22.4-49.9 49.9-49.9H885c42.2 0 76.5 34.3 76.5 76.5v465.6c0.1 42.2-34.3 76.6-76.5 76.6zM392.8 378.4c-1.8 0-3.3 1.5-3.3 3.3v492.2c0 16.5 13.4 30 30 30H885c16.5 0 30-13.4 30-30V408.3c0-16.5-13.4-30-30-30H392.8z"
          fill="#7D7D7D" p-id="44384"></path>
        <path
          d="M605.2 693.2H139.5c-42.2 0-76.5-34.3-76.5-76.5V124.4c0-27.5 22.4-49.9 49.9-49.9h492.2c42.2 0 76.5 34.3 76.5 76.5v465.6c0.1 42.3-34.2 76.6-76.4 76.6zM112.9 121.1c-1.8 0-3.3 1.5-3.3 3.3v492.2c0 16.5 13.4 30 30 30h465.6c16.5 0 30-13.4 30-30V151.1c0-16.5-13.4-30-30-30H112.9z"
          fill="#7D7D7D" p-id="44385"></path>
      </svg>
    </button>
    <!-- </ButtonGroup> -->
  </div>
</template>

<script>
import select from '../mixins/select';
// import { v4 as uuid } from 'uuid';

export default {
  name: 'ToolBar',
  mixins: [select],
  data() {
    return {};
  },
  computed: {
    // 单选且等于组元素
    isGroup() {
      return this.mSelectMode === 'one' && this.mSelectOneType === 'group';
    },
    // 是否为多选
    isMultiple() {
      return this.mSelectMode === 'multiple';
    },
  },
  methods: {
    // 拆分组
    unGroup() {
      this.canvas.editor.unGroup();
    },
    group() {
      this.canvas.editor.group();
    },
  },
};
</script>
<style scoped lang="scss">
</style>
